<template lang="pug">
div
  nav-div
    .item(slot="search")
      search-input(
        :keyword.sync="keyword",
        :load="load",
      )
  //- .ui.grid
  //-   .row
  //-     .sixteen.wide.column.middle.aligned
  //-       .ui.form
  //-         .inline.fields
  //-           .field
  //-             .ui.checkbox
  //-               input(type='checkbox', id="all")
  //-               label.pointer(for="all") 显示库存不足
  //-           label 库存低于
  //-           .field
  //-             input(type='number')
  //- .ui.divider
  table.ui.table
    thead
      tr
        th ID
        th 产品
        th &nbsp;
        th.border-right sku
        th 库存
        th 试戴中
        th.border-right 镜片生产
        //- th 销量
        //- th 试戴量
        //- th.border-right 购物车
        //- th 废品
        //- th 售后
        th.border-right 状态
        th 类型
    tbody
      tr(v-for="product in products | orderBy 'id' -1", track-by="$index")
        td
          a(v-link="{ name: 'product', params: { id: product.id } }", target="_blank") {{product.id}}
        td {{product.product_name}}
        td {{product.sub_product_name}}
        td.border-right {{product.sku_name}}
        td(v-bind:class="{ red: product.statistics.stock_warning }") {{product.statistics.in_stock}}
        td {{product.statistics.try}}
        td.border-right {{product.statistics.production}}
        //- td {{product.statistics.sold}}
        //- td {{product.statistics.tried}}
        //- td.border-right {{product.statistics.in_cart}}
        //- td {{product.statistics.wasted}}
        //- td {{product.statistics.aftermarket}}
        td.border-right {{product.status | subProductStatus}}
        td {{product.type}}
</template>

<script>
import NavDiv from '../../modules/nav'
import SearchInput from '../../modules/semantic/search'
import { getProducts } from '../../vuex/action'

export default {
  name: 'products',
  components: {
    SearchInput,
    NavDiv,
  },
  vuex: {
    getters: {
      products: ({ product }) =>  product.products,
    },
    actions: {
      getProducts,
    }
  },
  data () {
    return {
      keyword: null,
    }
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
    this.load()
  },
  methods: {
    load(){
      catchError(async () => {
        await this.getProducts()
      })
    },
  },
}
</script>

<style lang="sass" scoped>

</style>
